<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/elementUI.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名/性别/爱好">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="部门">
            <el-select v-model="form.deptId" placeholder="请选择部门" :clearable="true">
                <el-option v-for="dept in deptList" :label="dept.name" :value="dept.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="生日">
            <el-col :span="11">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.date1"
                                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择时间" v-model="form.date2"
                                style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>

        <el-form-item>
            <el-button @click="findPage()">查询</el-button>
            <el-button @click="handleAdd()">添加</el-button>
            <el-button @click="deleteAll()">批量删除</el-button>
            <el-button @click="exportExcel()">导出</el-button>
            <el-upload
                    action="/emp/uploadExcel"
                    :show-file-list="false"
                    name="file"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <el-button>导入</el-button>
            </el-upload>
        </el-form-item>
    </el-form>
    <el-table
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名">
        </el-table-column>
        <el-table-column
                label="性别">
            <template slot-scope="scope">
                {{scope.row.sex==0?'男':'女'}}
            </template>
        </el-table-column>
        <el-table-column
                prop="hobby"
                label="爱好">
        </el-table-column>

        <el-table-column
                prop="birthday"
                label="生日">
        </el-table-column>

        <el-table-column
                label="部门">
            <template slot-scope="scope">
                {{scope.row.dept==null?'':scope.row.dept.name}}
            </template>
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
                <el-button type="text" size="small" @click="deleteOne(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog :title="pojo.id==null?'添加员工':'修改员工'" :visible.sync="dialogFormVisible">
        <el-form :model="pojo">
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-input v-model="pojo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio-group v-model="pojo.sex">
                    <el-radio label="0">男</el-radio>
                    <el-radio label="1">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="爱好" :label-width="formLabelWidth">
                <el-checkbox-group v-model="hobby">
                    <el-checkbox label="篮球" name="hobby"></el-checkbox>
                    <el-checkbox label="足球" name="hobby"></el-checkbox>
                    <el-checkbox label="排球" name="hobby"></el-checkbox>
                    <el-checkbox label="棒球" name="hobby"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="生日" :label-width="formLabelWidth">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="pojo.birthday"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
                <el-select v-model="pojo.deptId" placeholder="请选择部门" :clearable="true">
                    <el-option v-for="dept in deptList" :label="dept.name" :value="dept.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app", // 标记vue的作用范围
        data: {
            tableData: [],
            pageNum: 1,
            pageSize: 2,
            total: 0,
            form: {},
            deptList: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            pojo:{},
            hobby:[],
            multipleSelection:[]

        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.$message({
                    type: 'success',
                    message: '恭喜你上传成功！!'
                });
                this.findPage();
            },
            beforeAvatarUpload(file) {
                return true;
            },
            exportExcel(){
                // 跳转页面
                location.href="/emp/exportExcel"
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection );
            },
            deleteAll(){
                if(this.multipleSelection.length==0){
                    this.$message({
                        type: 'success',
                        message: '请至少选择一条数据!'
                    });
                    return ;
                }
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/emp/deleteAll",this.multipleSelection).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.findPage();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteOne(id){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/emp/deleteOne?id="+id).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.findPage();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleEdit(id){
                axios.get("/emp/findById?id="+id).then(res=>{
                    this.pojo = res.data;
                    this.hobby = this.pojo.hobby.split(",");
                    this.dialogFormVisible = true;
                })
            },
            add(){
                this.pojo.hobby = this.hobby.join(",");
                axios.post(`/emp/${this.pojo.id==null?'add':'update'}`,this.pojo).then(res=>{
                    this.findPage();
                    this.dialogFormVisible = false;
                })
            },
            handleAdd() {
                this.pojo={};
                this.hobby=[];
                this.dialogFormVisible = true;
            },
            findDeptList() {
                axios.get("/emp/deptList").then(res => {
                    this.deptList = res.data;
                })
            },
            findPage() {
                // 发送请求，给后台，查询分页信息
                axios.post(`/emp/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.form).then(res => {
                    // res.data 就相当于得到了controller传回来的数据
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            // 当分页组件中的，每页数量发生改变时，分页组件，会自动调用此方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.findPage();
            }
        },
        created() {// 钩子函数，当vue对象创建之后，系统自动调用此方法
            this.findPage();
            this.findDeptList();
        }

    })
</script>
</body>
</html>